<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/jquery/jquery-1.7.2.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;	
	}
	body{
		font-family: Arial, Helvetica,sans-serif;
		font-size: 11px;
		background: #EFEAE2;
		overflow-x:hidden; 
	}
	.ALL{
		width: 670px;
		height: 300px;
		margin: 110px auto 0px auto;
		position: relative;
	}
	.ALL a.next,
	.ALL a.prev{
		background-position: center center;
		background-repeat: no-repeat;
		width: 20px;
		height: 20px;
		position: absolute;
		top:50%;
		cursor: pointer;
		opacity:0.5;
	}
	.ALL a.prev:hover,
	.ALL a.next:hover{
		opacity:1;
	}
	.ALL a.prev{
		background-image: url(resources/img/prev.png);
		left: -30px;
	}
	.ALL a.next{
		background-image: url(resources/img/next.png);
		right: -30px;
	}
	.ALL .menulist{
		width: 140px;
		height: 270px;
		background: #333;
		padding: 10px;
		position: absolute;
		top:0px;
		text-align: center;
		cursor: pointer;
		box-shadow:1px 1px 3px #000;
		-webkit-box-reflect:
		below 5px 
			-webkit-graient(
			linear,
			left top,
			left bottom,
			from(transparent),
			color-stop(0.1,transparent),to(rgb(18,18,18))
			);
		opacity:0.2;
	}
	.ALL .menulist:hover{
		background-color: #444;
	}
	.ALL .menulist img{
		width: 135px;
		height: 100px;
		border: 1px solid #444;
	}
	.ALL .menulist .info{
		color: #666;
		background: #111;
		height: 158px;
		line-height:20px;
		text-align: left;
		margin-top: 5px;
		border: 1px solid #393939;
	}
	.ALL .menulist:hover .info{
		background-color: #222;
	}
	.ALL .menulist .info h2{
		margin: 10px 10px 0 10px;
		padding-bottom: 5px;
		text-align: left;
		font-weight: normal;
		color: #ddd;
		text-shadow: 0 0 1px #fff;
		border-bottom: 1px dotted #333;;
	}
	.ALL .menulist .info span{
		display: block;
		margin: 5xp 10px 10px 10px;
	}
	.ALL a.disabled,
	.ALL a.disabled:hover{
		opacity:0.4;
		cursor: default;
	}
	
</style>
</head>
<body>
<div id="ALL" class="ALL">
	<a class="prev disabled"></a>
	<a class="next disabled"></a>
	
	<div id="menu">
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU1</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU2</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU3</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU4</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU5</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU6</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU7</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU8</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU9</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
		<div class="menulist">
			<img src="http://newcbnu.chungbuk.ac.kr/resource/site/www/images/main/cbnu_dummy.png" alt=""/>
			<div class="info"><h2>CBNU10</h2><span>충북대학교는 IT 전문가들을 위한 교육 시스템을 기반으로 하는 충북 교육의 대표 브랜드 입니다.
			</span></div>
		</div>
	</div>
</div>
<script type="text/javascript">
			$(function(){

				var first= 1;
				var positions 	= {
					'0'		: 0,
					'1' 	: 170,
					'2' 	: 340,
					'3' 	: 510
				}
				var $menu 	= $('#menu');
				var $ALL= $('#ALL');
				var total	= $menu.children().length;

				var hiddenRight= $(window).width() - $menu.offset().left;
				$menu.children('div').css('left',hiddenRight + 'px');

				function disableNext () {
					$ALL.find('.next').addClass('disabled');
				}
				function disablePrev () {
					$ALL.find('.prev').addClass('disabled');
				}
				function enableNext () {
					$ALL.find('.next').removeClass('disabled');
				}
				function enablePrev () {
					$ALL.find('.prev').removeClass('disabled');
				}		

				$menu.children('div:lt(4)').each(
					function(i){
						var $el = $(this);
						$el.animate({'left': positions[i] + 'px','opacity':1},800,function(){
							if(total > 1)
								enableNext();
						});
					}
				);


				$ALL.find('.next').bind('click',function(){
					if(!$menu.children('div:nth-child('+parseInt(first+4)+')').length ) return false;
					disableNext();	
					disablePrev();
					moveRight();
				});

				function moveRight () {
					var hiddenLeft 	= $menu.offset().left + 150;	
					var cnt = 0;

					$menu.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
							var $this = $(this);
							$menu.children('div').slice(first,parseInt(first+3)).each(
								function(i){
									var $el = $(this);
									$el.animate({'left': positions[i] + 'px'},500,function(){
										++cnt;
										if(cnt == 3){															
											$menu.children('div:nth-child('+parseInt(first+4)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
												++first;
												if(parseInt(first + 3) < total)
													enableNext();
													enablePrev();
											});
										}	
									});
								}
							);	
					});
				}

				$ALL.find('.prev').bind('click',function(){
					if(first==1  ) return false;
					disableNext();
					disablePrev();
					moveLeft();
				});

				function moveLeft () {
					var hiddenRight 	= $(window).width() - $menu.offset().left;				
					var cnt = 0;
					var last= first+3;
					$menu.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
							var $this = $(this);
							$menu.children('div').slice(parseInt(last-4),parseInt(last-1)).each(
								function(i){
									var $el = $(this);

									$el.animate({'left': positions[i+1] + 'px'},500,function(){
										++cnt;
										if(cnt == 3){
											$menu.children('div:nth-child('+parseInt(last-4)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
												--first;
												enableNext();
												if(first > 1)
													enablePrev();
											});
										}										
									});
								}
							);
					});
				}









			});
		</script>
</body>
</html>